<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

        <input type="text" id="username" >


        <input type="button"  value="sessionStorage 设置数据" id="sessionStorageId">


        <input type="button"  value="sessionStorage 获取数据" id="getsessionStorageId">

        <input type="button"  value="sessionStorage 删除数据" id="removesessionStorageId">

        <input type="button"  value="sessionStorage 更新数据" id="updatesessionStorageId">


        <input type="button"  value="sessionStorage 清除所有数据" id="clearsessionStorageId">


        <script>
                //增加数据.
                document.getElementById("sessionStorageId").onclick=function(){
                       var val=document.getElementById("username").value;
                        //获取到sessionStorage 往里面设置数据.
                        window.sessionStorage.setItem("username",val);
                };


                //sessionStorage 里面存储数据，如果关闭了浏览器，数据就会消失..
                //单个浏览器窗口页面有效..
                document.getElementById("getsessionStorageId").onclick=function(){
                        var valu=window.sessionStorage.getItem("username");
                        alert(valu);
                };


                document.getElementById("removesessionStorageId").onclick=function(){
                    var valu=window.sessionStorage.removeItem("username");
                };
                /*
                *  更新数据设置值 如果key 相同，则把之前的值覆盖.
                * */
                document.getElementById("updatesessionStorageId").onclick=function(){
                    //获取值
                    var val=document.getElementById("username").value;
                    //设置值 如果key 相同，则把之前的值覆盖.
                    var valu=window.sessionStorage.setItem("username",val);
                };
                //清除所有的数据.
                document.getElementById("clearsessionStorageId").onclick=function(){
                    window.sessionStorage.clear();
                };

        </script>

</body>
</html>